<template>
    <div>
        <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"
            placeholder="请选择省市区"></el-cascader>
        <!-- 指定绑定属性 -->
        <el-cascader v-model="value" :options="myOptions"
            :props="{ label: 'name', value: 'id', children: 'son' }"></el-cascader>

    </div>
</template>
   
<script  >
import { toRefs, reactive, ref } from '@vue/reactivity'
//引用 element-china-area-data
import { regionData, CodeToText } from 'element-china-area-data'

export default {
    name: "Test",
    setup() {
        const data = reactive({
            options: regionData,//选择格式
            selectedOptions: [], //省市区绑定数组
            myOptions: [{
                id: '1',
                name: '山东',
                son: [{
                    id: '2',
                    name: '济南',
                },
                {
                    id: '3',
                    name: '泰安',
                }],
            }],

        })

        const selectedOptions = ref([])
        const handleChange = (label) => {
            console.log(label, "所选code值");
            if (selectedOptions.value[0] != null && selectedOptions.value[1] != null && selectedOptions.value[2] != null) {
                const str = CodeToText[selectedOptions.value[0]] + '/' + CodeToText[selectedOptions.value[1]] + '/' + CodeToText[selectedOptions.value[2]]
                console.log(str)
            }


        }


        return {
            ...toRefs(data), handleChange, selectedOptions
        }

    }
}
</script>